<template>
  <div class="digital-cockpit">
    <!-- 顶部导航 -->
    <van-nav-bar
        title="能力配置"
        left-arrow
        @click-left="goBack"
        class="nav-bar"
    />

    <div
        class="subscription-card"
        v-for="(item, index) in subscriptions"
        :key="index"
        @click="toggleSelect(index)"
        :class="{ 'selected-card': selectedItems.includes(index) }"
    >
      <van-swipe-cell>
        <div v-if="selectedItems.includes(index)" class="selected-badge">
          <van-icon name="success" color="#fff" size="16" />
        </div>
        <div class="card-top">
          <!-- API标签 -->
          <span class="api-badge">{{ showtype(item.type) }}</span>
          <!-- 订阅名称 -->
          <span class="card-title">{{ item.name }}</span>
        </div>
        <van-divider class="h-divider" />
        <!-- 订阅描述 -->
        <div class="card-desc">{{ item.description }}</div>
      </van-swipe-cell>
    </div>

    <van-button
        type="primary"
        class="next-btn"
        @click="addSelectedAbilities">
      添加能力
    </van-button>
  </div>
</template>

<script>
import { getAction,postAction } from '@/api'
export default {
  name: "index",
  data() {
    return {
      subscriptions:'',
      selectedItems: [],
    }
  },
  mounted() {
    getAction('/sys/cockpithaveability/Querythelistofconfiguredcapabilitiesapp','').then(res=>{
      this.subscriptions=res.result
    })
  },
  methods:{
    goBack(){
      this.$router.go(-1);
    },
    showtype(val){
      if(val=='agent'){
        return 'Agent'
      }else{
        return 'API接口'
      }
    },
    toggleSelect(index) {
      const position = this.selectedItems.indexOf(index);
      if (position === -1) {
        this.selectedItems.push(index);
      } else {
        this.selectedItems.splice(position, 1);
      }
    },
    addSelectedAbilities() {
      // 获取选中的订阅项
      const selectedSubscriptions = this.selectedItems.map(index => this.subscriptions[index]);
      if(selectedSubscriptions.length === 0) {
        this.$toast('至少选择一个能力')
        return;
      }
      postAction("/sys/cockpithaveability/saveconfiguredcapabilities",{message:selectedSubscriptions.map(item => item.id).join(',')}).then(res=>{
        if(res.code === 200) {
          this.$toast('添加成功');
          this.goBack();
        } else {
          this.$toast('添加失败，请稍后再试');
        }
      }).catch(() => {
        this.$toast('网络错误，请稍后再试');
      });
    },
  }
}
</script>

<style scoped>
::v-deep .van-nav-bar__content{
  background: #F4FCFF;
}
.next-btn {
  margin-left: 20%;
  width: 60%;
  margin-top: 20px;
  border-radius: 32px;
  font-size: 18px;
  font-weight: 500;
  background: linear-gradient(90deg, #26B1A1 , #6FD0B3);;
  border: none;
}
/deep/.van-divider{
  margin: 8px 0px 8px 0px;
}
/deep/.van-button--square {
  height: 100%;
}
.delete-button {
  height: 100%;
}
/deep/ .van-nav-bar__text{
  color: #27C2AD !important;
}
.digital-cockpit{
  background: linear-gradient(180deg, #F4FCFE, #fff);
  /*background-color: #f7f8fa;*/
  min-height: 100vh;
}
.subscription-card {
  margin: 12px;
  background-color: #ffffff; /* 卡片半透背景 */
  border: 1px solid #ffffff; /* 青绿色边框（半透） */
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px; /* 卡片之间的间距 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.selected-card {
  background: #f0f7ff;
  border: 1px solid #27C2AD;
}
/* 右上角选中标记 */
.selected-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background-color: #1989fa;
  border-bottom-left-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 实现左右布局 */
  flex-wrap: nowrap; /* 防止换行 */
  gap: 8px; /* 标签和标题之间的间距，可根据实际效果调整 */

}
.api-badge {
  background-color: orange; /* 金色标签背景 */
  color: #ffffff; /* 标签文字颜色 */
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.card-title {
  color: #000000;
  font-weight: 540;
  flex-grow: 1; /* 占据剩余空间 */
}
.card-desc {
  color: #8F959E;
  opacity: 0.8; /* 文字淡显效果 */
  line-height: 1.4;
}
.card-action {
  display: flex;
}

</style>
